<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title>

<style> 

.demo{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}

.item{
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;

}

</style>

</head>

<body>

<div class="demo">

   <div class="item">1</div>

   <div class="item">2</div>

   <div class="item">3</div>

   <div class="item">4</div>

</div>

<p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 属性。</p>

<p><b>注意:</b> Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。</p>

<p><b>注意:</b> Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。</p>

</body>

</html>